<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width: 100px;
				height: 100px;
				background: blue;
				border-radius: 10px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="box">
			wenzishjak圣诞节卡还是登记卡汕德卡
		</div>
		<input id="input" type="button" value="点击"/>
		<input id="show" type="button" value="显示"/>
		<input id="hide" type="button" value="隐藏"/>
	</body>
	<script src="js/jquery-1.8.3.js"></script>
	<script>
		// toggle 比较生硬  不好看
		// $(function(){
		// 	//同时执行多个事件
		// 	//hover  =  mouseover    mouseout
		// 	// 鼠标的悬浮离开
		// 	$("#box").hover(function(){
		// 		//悬浮   mouseover
		// 		$(this).css("background","red");
		// 	},function(){
		// 		//离开   mouseout
		// 		$(this).css("background","green");
		// 	});
			
		// 	// $("#box").mouseover().mouseout();
		
		// 	//连续点击事件  1.8 以上不能使用
		// 	$("#box").toggle(function(){
		// 		$(this).css("background","pink")
		// 	},function(){
		// 		$(this).css("background","skyblue")
		// 	},function(){
		// 		$(this).css("background","orange")
		// 	})
			
		// 	//功能二：
		// 	$("#input").click(function(){
		// 		// 隐藏 显示 的切换功能
		// 		$("#box").toggle();
		// 	})
			
		// 	// $("#box").toggle(function(){
		// 	// 	$(this).css("display","none")
		// 	// },function(){
		// 	// 	$(this).css("display","block")
		// 	// })
		// })
		// // 有过度效果
		$(function(){
			$("#show").click(function(){
				//show 显示
				// 缺点：从右下角 到左上角的操作，会改变盒子原来的布局
				//  slow 慢   600    
				//  fast 快  200  
				//  normal 正常  400
				// $("#box").show("slow");
				
				// 淡入显示 改变透明度，不影响盒子布局
				// $("#box").fadeIn(4000);
				
				// 下拉显示 改变高度的显示
				// $("#box").slideDown(1000)
				
				// 自定义动画  animation
				$("#box").animate({
					"width":"100px",
					"height":"300px",
					"background-color":"pink"
				},1000)
				
			})
			$("#hide").click(function(){
				//hide 隐藏
				// $("#box").hide(400);
				// 淡出隐藏
				// $("#box").fadeOut(4000);
				// 上拉显示
				// $("#box").slideUp(1000);
				
				// 自定义动画  animation
				$("#box").animate({
					"width":"0px"
					
				},1000)
			})
			
			
		})
	</script>
</html>